<template>
  <div class="wrap">

    <div>
      <el-button type="primary" @click="deleteLine">删除行</el-button>
      <el-button type="primary" @click="insertChild">插入子元素</el-button>
      <el-button type="primary" @click="insertBefore">节点前插入元素</el-button>
      <el-button type="primary" @click="insertAfter">节点后插入元素</el-button>
      <el-button type="primary" @click="getAllNodes">获取所有节点</el-button>
    </div>

    <SkyPanel title="自研树形表格组件">
      <template v-slot:main>

        <SkyTreeTable ref="skyTable" v-slot="row" showCheckbox :selfTheadConfig="selfTheadConfig" fixed-head fixed-column :max-height="400" :table-width="1500" @getCurrent="getCurrent" :data="data" node-key="id" :props="defaultProps">
          <SkyTreeColumn :row="row.scope" prop="code" label="编码" width="350" ladder fixed fixed-left-width="0">{{row.scope.data.id}}</SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" prop="name" label="名字"></SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" prop="col1" label="col1">{{row.scope.data.name}}</SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" prop="col2" label="col2">{{row.scope.data.name}}</SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" prop="col3" label="col3">{{row.scope.data.name}}</SkyTreeColumn>
        </SkyTreeTable>

      </template>
    </SkyPanel>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, getCurrentInstance } from "vue";

  export default defineComponent({
    setup() {
      const skyTable = ref();
      const current = ref(null);

      onMounted(() => {
        // skyTable.value.setCurrentKey("2");
        const getInstance = getCurrentInstance();
        console.log("getInstance", getInstance);
      });

      const guid = () => {
        return "xxxxxxxx".replace(/[xy]/g, function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        });
      };

      const deleteLine = () => {
        skyTable.value.remove(current.value);
      };

      const insertChild = () => {
        skyTable.value.append(
          {
            id: guid(),
            name: "插入的子元素",
          },
          current.value.data.id
        );
      };

      const insertBefore = () => {
        skyTable.value.insertBefore(
          {
            id: guid(),
            name: "节点前插入一个元素",
          },
          current.value.data.id
        );
      };

      const insertAfter = () => {
        skyTable.value.insertAfter(
          {
            id: guid(),
            name: "节点后插入一个元素",
          },
          current.value.data.id
        );
      };

      const getAllNodes = () => {
        console.log(skyTable.value.getAllNodes());
      };

      const getCurrent = (type, node) => {
        // console.log(type);
        // console.log(node);
        current.value = node;
      };

      return {
        skyTable,
        deleteLine,
        insertChild,
        insertBefore,
        insertAfter,
        getAllNodes,
        getCurrent,
      };
    },
    data() {
      return {
        data: [
          {
            id: "1",
            name: "一级 1",
            children: [
              {
                id: "1-1",
                name: "二级 1-1",
                children: [
                  {
                    id: "1-1-1",
                    name:
                      "特别长的文本~特别长的文本~特别长的文本~特别长的文本~特别长的文本~特别长的文本~",
                  },
                ],
              },
            ],
          },
          {
            id: "2",
            name: "一级 2",
            children: [
              {
                id: "2-1",
                name: "二级 2-1",
                children: [
                  {
                    id: "2-1-1",
                    name: "三级 2-1-1",
                  },
                ],
              },
              {
                id: "2-2",
                name: "二级 2-2",
                children: [
                  {
                    id: "2-2-1",
                    name: "三级 2-2-1",
                  },
                ],
              },
            ],
          },
          {
            id: "3",
            name: "一级 3",
            children: [
              {
                id: "3-1",
                name: "二级 3-1",
                children: [
                  {
                    id: "3-1-1",
                    name: "三级 3-1-1",
                  },
                ],
              },
              {
                id: "3-2",
                name: "二级 3-2",
                children: [
                  {
                    id: "3-2-1",
                    name: "三级 3-2-1",
                  },
                ],
              },
            ],
          },
        ],
        selfTheadConfig: [
          [
            {
              title: "编码",
              colspan: 1,
              rowspan: 2,
              fixed: true,
            },
            {
              title: "名称",
              colspan: 1,
              rowspan: 2,
            },
            {
              title: "详情",
              colspan: 3,
              rowspan: 1,
            },
          ],
          [
            {
              title: "col1",
              colspan: 1,
              rowspan: 1,
            },
            {
              title: "col2",
              colspan: 1,
              rowspan: 1,
            },
            {
              title: "col3",
              colspan: 1,
              rowspan: 1,
            },
          ],
        ],
        defaultProps: {
          children: "children",
          label: "name",
        },
      };
    },
  });
</script>

<style scoped lang="scss">
.wrap {
  width: 1164px;
  margin: 20px auto;
}
</style>